<?php
/**
 * @var \Phalcon\Mvc\View\Engine\Php $this
 */
?>
<div class="page-header">
    <h1>
        作业测试 </h1>
</div>
<?php echo $this->getContent() ?>
<?=$this->tag->javascriptInclude("js/jquery-2.1.4.min.js")?>
<?=$this->tag->javascriptInclude("ext/jquery-validate/dist/jquery.validate.js")?>
<?php
echo $this->tag->form([
    "user/register",
    "autocomplete" => "off",
    "class"        => "form-horizontal"
]);
?>
<div class="form-group">
    <label for="fieldName" class="col-sm-2 control-label">用户名</label>
    <div class="col-sm-10">
        <?php echo $this->tag->textField(["username", "size" => 30, "class" => "form-control", "id" => "fieldName", '']) ?>
        <span class="error">
    </div>
</div>
<div class="form-group">
    <label for="fieldPassword" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
        <?php echo $this->tag->passwordField(["password", "size" => 30, "class" => "form-control", "id" => "fieldPassword"]) ?>
        <span class="error">
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <?php echo $this->tag->submitButton(["提交", "class" => "btn btn-info"]) ?>
    </div>
</div>
<?php echo $this->tag->endForm(); ?>
<script type="text/javascript">
    //    jquery-validate验证
    var setting = {
        rules: {
            username: {
                required: true,
                rangelength: [3, 20],
                remote: '<?php echo $this->url->get('user/check')?>'
            },
            password: {
                required: true,
                rangelength: [6, 16]
            }
        }, //错误信息
        messages: {
            username: {
                required: '用户名不能为空',
                rangelength: '用户名必须是3-20个字符',
                remote: "用户名已经存在",
            },
            password: {
                required: '密码不能为空',
                rangelength: '密码长度必须是6到16位',
            },
        },
        errorPlacement: function(error, node){
            //需要找出出错控件后的error节点,并把错误信息显示出来
            var node = node[0];
            var msg_node = $(node).siblings(".error").get(0);
            $(msg_node).text($(error[0]).text()).attr("style", "color:red;");
        },
        success: function(){

        }
    }
    //对指定的表单使用jquery-validate验证
    $('.form-horizontal').validate(setting);
</script>
